<template>
  <div>
    <el-table :data="checkOutList" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column prop="id" label="序号" width="180">
        <template slot-scope="scope">
          <p>{{scope.$index+1}}</p>
      </template>
      </el-table-column>
      <el-table-column prop="book" label="图书名称"></el-table-column>
      <el-table-column prop="user" label="借阅人"></el-table-column>
      <el-table-column prop="borrowDate" label="借阅日期"></el-table-column>
      <el-table-column prop="dueDate" label="应还日期"></el-table-column>
      <el-table-column prop="status" label="状态"
      :filters="[{ text: '已归还', value: '已归还' }, { text: '未归还', value: '未归还' }, { text: '已超期', value: '已超期' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
        <template slot-scope="scope">
        <el-tag
          :type="scope.row.status === '已超期' ? 'danger' : 'primary'"
          disable-transitions>{{scope.row.status}}</el-tag>
      </template>
      </el-table-column>
      <el-table-column label="操作">
       <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'checkoutList',
  data () {
    return {
    }
  },
  created () {
    this.$store.dispatch('CheckOut/getList')
  },
  computed: {
    ...mapState('CheckOut', ['checkOutList'])
  },
  methods: {
    handleDelete (id) {
      console.log(id)
      // 使用 Element UI 的 MessageBox 进行确认操作
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认后的操作，例如显示删除成功的消息
        this.$store.dispatch('CheckOut/deleteCheckOut', id)
        this.$message.success('删除成功')
      }).catch(() => {
        // 取消操作的处理
        this.$message.info('已取消删除')
      })
    },
    tableRowClassName ({ row, rowIndex }) {
      // console.log(rowIndex)
      if (row.status === '已超期') {
        return 'warning-row'
      }
      return ''
    },
    filterTag (value, row) {
      return row.status === value
    },
    ...mapActions('CheckOut', ['getList', 'deleteCheckOut'])
  }
}
</script>

<style>
.el-table .warning-row {
    background: #fef0f0;
  }

</style>
